﻿<!doctype html>
<html>
<head>
  <title>GoJS Sample Diagrams for JavaScript and HTML, by Northwoods Software</title>
  <!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
  <meta name="description" content="GoJS JavaScript diagram samples for HTML, including many kinds of flowcharts, org charts, BPMN, and other visual graph types." />
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script>
    (function(i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() {
      (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date(); a = s.createElement(o),
      m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
    ga('create', 'UA-1506307-5', 'auto');
    ga('send', 'pageview');
  </script>
  <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
  <!-- custom CSS after bootstrap -->
  <link href="../assets/css/main.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    .flex-container {
      display: -webkit-flex;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      margin-top: 8px
    }

    .flex-item {
      width: 220px;
      -webkit-flex-grow: 1;
      -webkit-flex-shrink: 1;
      flex-grow: 1;
      flex-shrink: 1;
    }
  </style>

</head>
<body>
  <!-- non-fixed navbar -->
  <nav class="navbar navbar-inverse navbar-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <div class="navheader-container">
          <div class="navheader-collapse" data-toggle="collapse" data-target="#navbar">
            <a id="toplogo" class="navbar-brand" href="../index.html">GoJS</a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          </div>
        </div>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="../index.html">Home</a></li>
          <li><a href="../learn/index.html">Learn</a></li>
          <li><a href="../samples/index.html">Samples</a></li>
          <li><a href="../intro/index.html">Intro</a></li>
          <li><a href="../api/index.html">API</a></li>
          <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
          <li><a href="../download.html">Download</a></li>
          <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
          <li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li>
          <li class="buy"><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li>
          <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </nav>

<div class="container-fluid plr15" id="container">
  <div class="row">
    <div class="col-md-12">
      <h1>GoJS Samples</h1>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6">
      <p>
        Our samples demonstrate how to build several Diagram types and showcase specific features and layouts. You can use the HTML and JavaScript in these samples as the starting point for your application.
      </p>
      <p>
        If you are done looking around and are ready to experiment with GoJS, <a href="../learn/index.html">read the getting started tutorial.</a>
      </p>
      <p>
        There is a React sample on GitHub at: <a href="https://github.com/NorthwoodsSoftware/gojs-react-basic">gojs-react-basic</a>,
        and an Angular sample at: <a href="https://github.com/NorthwoodsSoftware/gojs-angular-basic">gojs-angular-basic</a>.
        See more at <a href="../projects/index.html">Projects</a>.
      </p>
    </div>
    <div class="col-md-6">
      <p>
        If you are looking for examples of a particular GoJS method or property, you can search the source code of all samples and extensions and documentation on GitHub:
      </p>
      <p>
        <input id="searchInput" type="text" placeholder="setDataProperty" />
        <a id="searchAnchor" href="https://github.com/NorthwoodsSoftware/GoJS/search?q=setDataProperty&amp;type=Code" target="_blank" >
          <span id="searchButton" class="btn btn-primary">Search source code</span>
        </a>
      </p>
      <p>
        <a href="https://www.nwoods.com/components/evalform.htm">Register with us for support during your evaluation.</a>
      </p>
    </div>
  </div>

  <div>
    <div id="tagsDiv">
    </div>
    <div id="samplesDiv">
    </div>
    <div>
      <h4><a href="all.html">Complete list of all samples</a></h4>
    </div>
  </div>

</div><!-- /.container -->

<p class="footer">
GoJS &reg; by Northwoods Software. Copyright &copy; 1998-2021 <a href="https://www.nwoods.com" target="_blank">Northwoods Software</a> &reg;
</p>

<script src="indexList.js"></script>
<script src="../assets/js/jquery.min.js"></script>
<script async src="../assets/js/bootstrap.min.js"></script>
<script>
  var searchInput = document.getElementById('searchInput');
  var searchAnchor = document.getElementById('searchAnchor');
  searchInput.addEventListener('input', function(e) {
    var searchterm = searchInput.value;
    if (searchterm === '') searchterm = "setDataProperty";
    searchAnchor.href = "https://github.com/NorthwoodsSoftware/GoJS/search?q=" + searchterm +  "\&type=Code";
  });
  searchInput.addEventListener('keydown', function(e) {
    if (e.which === 13) searchAnchor.click();
  });

  var hash = null;
  var selectedTag = "all";
  buildTags();

  $(document).ready(changeHash);
  $(window).on('hashchange', changeHash);

  function buildTags() {
    var tagDiv = document.getElementById("tagsDiv");
    for (var i = 0; i < tags.length; i++) {
      var tag = tags[i];
      var tagButton = document.createElement('button');
      if (tag !== selectedTag) {
        tagButton.className = "btn btn-primary btn-sm btn-tag";
      } else {
        tagButton.className = "btn btn-primary btn-sm btn-selected-tag";
      }
      tagButton.id = tag + "Btn";
      tagButton.value = tag;
      tagButton.innerHTML = tag;
      tagButton.onclick = onTagClick;
      tagDiv.appendChild(tagButton);
    }
  }

  function onTagClick(e) {
    this.blur(); // we want to be able to see the styles, so blur once we've clicked
    if (selectedTag === this.value) return;
    window.location.hash = "#" + this.value;
  }

  function changeHash() {
    document.getElementById(selectedTag + "Btn").className = "btn btn-primary btn-sm btn-tag"; // clear current selected tag's style
    hash = window.location.hash;
    if (tags.indexOf(hash.substring(1)) < 0) {
      selectedTag = "all";
    } else {
      selectedTag = hash.substring(1);
    }
    document.getElementById(selectedTag + "Btn").className = "btn btn-primary btn-sm btn-selected-tag"; // set new selected tag's style
    buildSamples();
  }

  function buildSamples() {
    var sampleListDiv = document.getElementById("samplesDiv");
    sampleListDiv.className = "flex-container";
    sampleListDiv.innerHTML = ""; // empty the div to start off
    var filteredSamples = filterSamples();
    if (filteredSamples.length === 0) return;

    for (var i = 0; i < filteredSamples.length; i++) {
      var sample = filteredSamples[i];
      var samplediv = document.createElement('div');
      samplediv.className = "flex-item";

      var a = document.createElement('a');
      a.href = sample[0] + '.html';

      var img = document.createElement('img');
      img.src = '../assets/images/screenshots/' + sample[3] + '.png';
      img.width = 200;
      img.height = 200;
      img.className = "img-responsive img-thumbnail";
      a.appendChild(img);

      var title = document.createElement('h2');
      title.textContent = sample[1];
      a.appendChild(title);

      var desc = document.createElement('p');
      desc.textContent = sample[2];

      samplediv.appendChild(a);
      samplediv.appendChild(desc);
      sampleListDiv.appendChild(samplediv);
    }
  }

  function filterSamples() {
    var filteredSamples = [];
    for (var i = 0; i < arr.length; i++) {
      var sample = arr[i];
      if (selectedTag === "all" || sample[4].indexOf(selectedTag) >= 0) {
        filteredSamples.push(sample);
      }
    }
    return filteredSamples;
  }
</script>
</body>
</html>

